<template>
  <div class="LineChartGroup">
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="24" :sm="24" :lg="24" :xl="24">
        <div class="chart-wrapper">
          <p class="box-between line-warp-title">
            <span>近8天挂号量统计</span>
            <span>2020-01</span>
          </p>
          <line-chart :chart-data="lineChartItem" />
        </div>
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :lg="12" :xl="12">
        <div class="chart-wrapper">
          <p class="line-warp-title">挂号量排名前{{ itemsInfo.item.dept.length }}的科室</p>
          <card-list :dept="itemsInfo.item.dept" />
        </div>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import LineChart from './components-group/LineChart'
// import CardList from './components-group/CardList'

export default {
  components: {
    LineChart

  },
  props: {
    itemsInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      lineChartItem: {
        expectedData: [],
        actualData: []
      }
    }
  },
  mounted() {
    // eight

    this.$nextTick(() => {
      this.initLineChart()
    })
  },
  methods: {
    initLineChart() {
      this.itemsInfo.item.eight.forEach(res => {
        this.lineChartItem.expectedData.push(res.num)
        this.lineChartItem.actualData.push(res.date)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.LineChartGroup {
  margin-top: 30px;
  .chart-wrapper {
    padding:0 20px;
    height: 400px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 11px 11px rgba(95, 125, 247, 0.1);

    border-radius: 5px;
    margin-bottom: 10px;
    .line-warp-title {
      padding-top: 10px;
      // margin: 10px 0;
      font-size: 16px;
      color: #333333;
    }
  }
}
</style>
